<template>
  <el-dialog title="状态修改" :visible.sync="show">
    <el-form :model="form">
      <el-form-item label="ID" :label-width="formLabelWidth">
        <el-input
          v-model="form.id"
          autocomplete="off"
          :disabled="true"
        ></el-input>
      </el-form-item>
      <el-form-item label="游客机编号" :label-width="formLabelWidth">
        <el-input
          v-model="form.num"
          autocomplete="off"
          :disabled="true"
        ></el-input>
      </el-form-item>
      <el-form-item label="责任人" :label-width="formLabelWidth">
        <el-input
          v-model="form.name"
          autocomplete="off"
          :disabled="true"
        ></el-input>
      </el-form-item>

      <el-form-item label="状态选择" :label-width="formLabelWidth">
        <el-select v-model="form.states" placeholder="请选择修改状态">
          <el-option label="维修" value="3"></el-option>
          <el-option label="丢失" value="4"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="show = false">取 消</el-button>
      <el-button type="primary" @click="modify">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { toAbnormal } from "@/network/api/device";
export default {
  props: {
    visible: {
      type: Boolean,
    },
    resource: {
      type: Object,
      default: function () {
        return {};
      },
    },
    current: {
      type: Number,
      default: 0,
    },
    size: {
      type: Number,
      default: 5,
    },
  },
  data() {
    let { visible, resource } = this.$props;
    return {
      show: visible,
      formLabelWidth: "120px",
      form: {
        id: resource.visitorId,
        num: resource.visitorNumber,
        name: resource.visitorPerson,
        states: "",
      },
    };
  },
  methods: {
    async modify() {
      this.show = false;
      let res = await toAbnormal(
        this.$props.current,
        this.$props.size,
        this.form
      );
      if (res.data.code == "200") {
        this.$emit("sendMsg", "success");
        this.$message({
          message: res.data.message,
          type: "success",
        });
      }
    },
  },
  watch: {
    "$props.visible"(newVal, oldVal) {
      this.show = newVal;
    },
    "$props.resource"(newVal, oldVal) {
      this.form.id = newVal.visitorId;
      this.form.num = newVal.visitorNumber;
      this.form.name = newVal.visitorPerson;
      this.form.states = "";
    },
  },
};
</script>

<style scoped lang='scss'>
.el-input {
  width: 50%;
}
</style>